<template>
  <div class="ser_detail">
    <head-top head-title="详情" hidden='true' goBack="true"></head-top>
    <div class="ser_word">
      <div class="help_top">
        <div class="help_title">
          <img :src="list.head_pic" alt="">
          <div class="help_msg">
            <div class="msg_top">
              <p>{{list.name}}</p>
              <p>
                <a :href="'tel:'+list.phone" class="tel">
                  <span class="phone-image"></span>{{list.phone}}</a>
              </p>
            </div>
            <div class="msg_bottom">
              <p>{{list.areas_name}}</p>
            </div>
          </div>
        </div>
      </div>
      <!--descPic子组件-->
      <desc-pic :list="list"></desc-pic>
      <div class="ser_time" v-if="flag">
        <span>{{list.created_at * 1000 | dateFmt(('YYYY-MM-DD HH:mm:ss'))}}</span>
        <span>浏览人数：{{list.reading_amount}}</span>
      </div>
      <div class="line"></div>
      <!--论坛发布的子组件-->
      <section class="reply-wrapper">
        <comment :list="list" :lists="lists" @passMethods="_getServiceDetail"></comment>
      </section>
    </div>
  </div>
</template>
<style lang="scss">
  @import '../../common/sass/mixin.scss';

  .ser_detail {
    width: 100%;
    padding-top: 40px;
    background: #fff;
    .ser_word {
      .help_top {
        width: 100%;
        .help_title {
          width: 100%;
          height: 65px;
          border-bottom: 1px solid #d7d7d7;
          img {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            float: left;
            margin-top: 10px;
            margin-left: 10px;
          }
          .help_msg {
            float: right;
            width: 83%;
            height: 65px;
            .msg_top {
              width: 100%;
              height: 25px;
              margin-top: 12px;
              p:first-child {
                float: left;
                font-size: 15px;
              }
              p:last-child {
                float: right;
                margin-right: 10px;
                a {
                  font-size: 13px;
                  float: right;
                  color: #0078de;
                  .phone-image {
                    display: inline-block;
                    width: 15px;
                    height: 15px;
                    background-size: 15px 15px;
                    background-repeat: no-repeat;
                    @include bgimg('../home/images/dianhua');
                    vertical-align: middle;
                  }
                }
              }
            }
            .msg_bottom {
              width: 100%;
              height: 32px;
              p {
                float: left;
                line-height: 15px;
                font-size: 12px;
                color: #808080;
              }
            }
          }
        }
      }
      .ser_time {
        width: 100%;
        height: 30px;
        border-top: 1px solid #f2f2f2;
        span:first-child {
          line-height: 30px;
          font-size: 13px;
          margin-right: 10px;
          color: #777777;
          float: left;
          margin-left: 10px;
        }
        span:last-child {
          line-height: 30px;
          font-size: 13px;
          margin-right: 10px;
          color: #777777;
          float: right;
        }
      }
      .line {
        width: 100%;
        height: 10px;
        background: #f2f2f2;
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import comment from '../common/comment.vue'
  import descPic from '../common/desPic.vue'
  import { getServiceDetail } from '../../api/supervise.js'

  export default {
    name: 'ServiceDetail',
    data () {
      return {
        lists: [],
        list: {},
        flag: false
      }
    },
    components: {
      headTop,
      comment,
      descPic
    },
    mounted () {
      this._getServiceDetail()
    },
    methods: {
      _getServiceDetail () {
        getServiceDetail(this.$route.params.id).then(res => {
          if (res.code === 200) {
            this.lists = res.data.comment
            this.list = res.data.super
            this.flag = true
          }
        })
      }
    }
  }
</script>
